<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计</title>
    <style>
      input{
        height: 25px;
      }
      hr{
        border: 1px dashed black;
        width: 100%;
      }
      select{
        height: 30px;
      }
      .tel{
        width: 80px;
      }
      .phone{
        width: 78px;
      }
      input{
        vertical-align: middle;
      }
      div{
        margin-bottom: 23px;
        color: rgb(49,145,255);
      }
      button{
        width: 140px;
        height: 40px;
      }
      button{
        color: white;
        background: rgb(255,128,0);
        border: 0px;
      }
      .orange{
        font-size: 14px;
        color: orange;
      }
      tr a{
        font-size: 14px;
        color: orange;
      }
    </style>
</head>
<script src="../js/jquery-3.6.3.min.js"></script>
<script>
    $(function () {
        let un = $("[name='username']")
        let na = $("[name='realname']")
        let m = $("[name='pwd']")
        let m2 = $("[name='pwd2']")
        let em = $("[name='youremail']")
        let from = $("form")
        let unl=false
        let nal=false
        let ml =false
        let m2l=false
        let eml=false
        un.change(function () {
			
            let n1 = un.parent().next()
            // console.log(n1)
            let reg =/^[\u4E00-\u9FA5]+$/
            if (!reg.test(un.val())){
                n1.html('<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp; 姓名中不能包含数字</span>')
                return unl=false
            }
            n1.html('')
            return unl=true
        })
        na.change(function () {
            let n1 = na.parent().next()
            let reg =  /^[a-zA-Z0-9-_]{6,10}$/
            if (!reg.test(na.val())){
                n1.html('<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp; 姓名中不能为空</span>')
                return nal=false
            }
            n1.html('')
            return  nal = true

        })
        m.change(function () {
            let n1 = m.parent().next()
            let reg =   /[0-9a-zA-Z_]{6,16}/
            if (!reg.test(m.val())){
                n1.html('<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp; 姓名中不能为空</span>')
                return ml=false
            }
            n1.html('')
            return  ml = true
        })
        m2.change(function () {
            let n1 = m2.parent().next()
            if (m2.val()!==m.val()){
                n1.html('<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp; 俩次输入的密码不一致</span>')
                return m2l=false
            }
            n1.html('')
            return  m2l = true
        })
        em.change(function () {
            let n1 = em.parent().next()
            let reg =/^\w+@[a-z0-9]+\.[a-z]+$/i
            if (!reg.test(em.val())){
                n1.html('<span style="color: red">&nbsp;&nbsp;&nbsp;&nbsp; 邮箱格式不正确</span>')
                return eml=false
            }
            n1.html('')
            return  eml = true
        })
        from.submit(function (e) {
            // if (!(un.change)) e.preventDefault()
            // if (!(nal)) e.preventDefault()
            // if (!(ml)) e.preventDefault()
            // if (!(m2l)) e.preventDefault()
            // if (!(eml)) e.preventDefault()
            let f1 = em.trigger("change")
            let f2 = m2.trigger("change")
            let f3 = m.trigger("change")
            let f4 = na.trigger("change")
            let f5 = un.trigger("change")
            return eml&&m2l&&ml&&nal&&unl
        })
    })
</script>
<body>
    <form action="bdqn.html" method="post">
      <table>
          <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" placeholder="用户名设置成功后不可修改"></td>
            <td class="orange"></td>
          </tr>
          <tr>
              <td>姓名：</td>
              <td><input type="text" name="realname" placeholder="请输入证件上的中文姓名"></td>
              <td class="orange"></td>
          </tr>
          <tr>
            <td>登录密码：</td>
            <td><input type="password" name="pwd" placeholder="6-20位字母、数字或符号" ></td>
              <td class="orange"></td>
          </tr>
          <tr>
            <td>确认密码：</td>
            <td><input type="password" name="pwd2" placeholder="再次输入您的登录密码" ></td>
              <td class="orange"></td>
          </tr>
          <tr>
            <td>邮箱：</td>
            <td><input type="email" name="youremail" placeholder="请正确填写邮箱地址"></td>
              <td class="orange"></td>

          </tr>
          <td>
            <button type="submit">下一步</button>
          </td>
        </tr>
      </table>
    </form>
</body>
</html>